<template>
  <div class="interface-demo">
    <h2>id：{{ person.id }}</h2>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <div v-for="p in persons" :key="p.id">
      <h2>id：{{ p.id }}</h2>
      <h2>姓名：{{ p.name }}</h2>
      <h2>年龄：{{ p.age }}</h2>
    </div>
  </div>
</template>

<script lang="ts" setup name="InterfaceDemo">
import { ref } from "vue";
import { type IPerson, type IPersons1 } from "@/types";
let person: IPerson = {
  id: "fdsafwefds001",
  name: "zhangsan",
  age: 18,
};
let persons: IPersons1 = [
  { id: "fdsafwefds001", name: "里斯", age: 18 },
  { id: "fdsafwefds002", name: "王五", age: 19 },
  { id: "fdsafwefds003", name: "赵六", age: 28 },
];
</script>

<style>
.interface-demo {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>